<template>
  <div>
    <div class="header-btn">
      <div>{{pageTitle}}</div>
      <div>
        <el-button type="primary" @click="addOrUpdateTask" :loading="addloading">确认</el-button>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header" style="margin-left: 0">基础详情</div>
      <el-form ref="form1" :model="form1" :rules="rules1" label-width="100px" label-position="right" style="position: relative">
        <el-form-item label="欢迎语名称" prop="welcomeName">
          <el-input v-model="form1.welcomeName" popper-class="minWidth-inp" style="width: 800px" placeholder="请输入">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header" style="margin-left: 0">欢迎语设置</div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="right" style="position: relative">
        <el-form-item label="文本内容" prop="welcomeMsg">
          <div style="display: flex;flex-direction: column">
            <el-input type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入文本" v-model="form.welcomeMsg" style="width: 800px" maxlength="200" show-word-limit>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="选择素材">
          <NormalSelectMaterial v-if="operateFlag" :selectedList="form.mediaContentDetails" @confirmSelect="confirmSelectFn" />
        </el-form-item>
        <el-form-item label="二维码">
          <NormalQrCode v-if="operateFlag" :codeInfo="codeParams" @selectedSure="qrCodeConfrim" @deleteSeletedQrcode="deleteSeletedQrcode" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { nameValidate } from '@/utils/validate'
import { addGroupTlp, editGroupTlp, editInfo } from '@/api/groupGreet'

export default {
  name: 'addDispatch',
  data() {
    return {
      pageTitle: '创建群欢迎语',
      operateFlag: '',
      total: 0,
      form: {
        welcomeMsg: '',
        mediaContentDetails: [],
        codeState: '',
      },
      form1: {
        welcomeName: '', // 任务名称
      },
      rules1: {
        welcomeName: [
          {
            required: true,
            validator: nameValidate('欢迎语', 32),
            trigger: 'blur',
          },
        ],
      },
      rules: {
        welcomeMsg: [
          {
            required: true,
            message: '群发内容不能为空',
            trigger: 'blur',
          },
        ],
      },
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      addloading: false, //加载弹窗
      codeParams: {
        qrState: '1',
        qrType: '',
        activityName: '',
        codeUrl: '',
        qrId: ''
      },
    }
  },
  mounted() {
    this.editInfo()
  },
  methods: {
    // 确定选择的素材
    confirmSelectFn(val) {
      this.form.mediaContentDetails = val;
    },
    // 初始化查询
    editInfo() {
      if (this.$route.query.id) {
        this.pageTitle = "编辑群欢迎语";
        editInfo({ id: this.$route.query.id }).then((res) => {
          if (res.code == 200) {
            this.form1.welcomeName = res.data.welcomeName
            this.form = res.data
            this.form.codeState = this.form.codeState || '1'
            if (res.data.messageCode) {
              this.codeParams = {
                qrState: '0',
                qrType: res.data.messageCode[0].qrType || '',
                activityName: res.data.messageCode[0].activityName || '',
                codeUrl: '12321321',
                qrId: ''
              }
            }
            this.operateFlag = this.$route.query.operateFlag;
          }
        }).catch(() => {})
      } else {
        this.operateFlag = this.$route.query.operateFlag;
      }
    },
    // 确认
    addOrUpdateTask() {
      this.form.mediaContentDetails.forEach((item) => {
        if (item.mediaType == '3') {
          item.materialUrl =
            window.globalConfig.SHARE_URL + '/linkFile?id=' + item.id
        } else if (item.mediaType == '4') {
          item.materialUrl =
            window.globalConfig.SHARE_URL + '/linkArticle?id=' + item.id
        } else if (item.mediaType == '10') {
          item.materialUrl =
            window.globalConfig.SHARE_URL + '/linkForm?id=' + item.id
        }
      })

      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.codeParams.qrState == '0' && !this.codeParams.codeUrl) {
            this.$message.error('请选择二维码！');
            return
          }
          let obj = {
            ...this.form,
            ...this.form1,
            messageCode: [this.codeParams],
            welcomeMsgTplType: '3',
          }
          obj.codeState = this.codeParams.qrState;
          this.addloading = true
          if (this.operateFlag == 'ADD') {
            addGroupTlp(obj).then((res) => {
              if (res.code === 200) {
                this.$message.success('新增成功')
                this.addloading = false
                this.$router.push({
                  name: 'CreateGreeting',
                })
              }
            })
            .catch(() => {
              this.addloading = false
            })
          } else {
            obj.id = this.$route.query.id
            editGroupTlp(obj).then((res) => {
              if (res.code === 200) {
                this.$message.success('修改成功')
                this.addloading = false
                this.$router.push({
                  name: 'CreateGreeting',
                })
              }
            }).catch(() => {
              this.addloading = false
            })
          }
        } else {
          this.$message.error('您还未录入完成，请核对后提交！')
        }
      })
    },
    // 返回
    goBack() {
      this.$router.go(-1)
    },
    // 删除二维码
    deleteSeletedQrcode() {
      this.codeParams.qrType = '';
      this.codeParams.activityName = '';
      this.codeParams.codeUrl = '';
      this.codeParams.qrId = '';
    },
    qrCodeConfrim(data) {
      if (data) {
        this.codeParams = {
          qrState: data.qrState,
          qrType: data.qrType,
          activityName: data.activityName,
          codeUrl: data.qrCode || data.codeUrl,
          qrId: data.qrId
        }
      } else {
        this.codeParams = {
          qrState: 1,
          qrType: '',
          activityName: '',
          codeUrl: '',
          qrId: ''
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../styles/base.scss';
.header-btn {
  @include headerBtn;
}
.wrap {
  @include titleWrap;
}
</style>
